<!-- eslint-disable vue/valid-v-model -->
<!-- eslint-disable vue/no-parsing-error -->
<template>
 <div>
<el-dialog
  title="题目预览"
  :visible.sync="dialogVisible"
  width="50%">
    <el-row>
        <el-col :span="6"><span>【题型】：{{renderObj.questionType}}</span> </el-col>
        <el-col :span="6"><span>【编号】：{{renderObj.id}}</span></el-col>
        <el-col :span="6"><span>【难度】：{{renderObj.difficulty===1?'简单':renderObj.difficulty===2?'一般':'困难'}}</span></el-col>
        <el-col :span="6"><span>【标签】：{{renderObj.tags}}</span></el-col>
      </el-row>
        <el-row class="el_row2">
        <el-col :span="6"><span>【学科】：{{renderObj.subjectName}}</span> </el-col>
        <el-col :span="6"><span>【目录】：{{renderObj.catalogID}}</span></el-col>
        <el-col :span="12"><span>【方向】：{{renderObj.direction}}</span></el-col>
    </el-row>
      <el-row class="el_row3" >
       <!-- eslint-disable-next-line vue/no-parsing-error -->
      <el-col :span="24"><span>【题干】：{{renderObj.question.replace(/<.*?>/ig, '')}}</span> </el-col>
    </el-row>
    <el-row class="el_row" >
      <el-col :span="24"><span class="el_span">选项：(以下选中的选项为正确答案)</span> </el-col>
    </el-row>
        <el-row class="el_row4" >
        <el-radio v-model="item.isRight" label="1" v-for="item in renderObj.options" :key="item.code" disabled>{{item.title}}</el-radio>
    </el-row>
      <el-row class="el_row5" >
      <el-col :span="24"><span>【参考答案】：</span>
      <el-button type="danger" size="small" @click="flag=!flag">视频答案预览</el-button>
      </el-col>
      <video src="#" controls v-if="flag"></video>
    </el-row>
      <el-row class="el_row6" >
      <el-col :span="24"><span>【题目解析】：{{renderObj.answer.replace(/<.*?>/ig, '')||''}}</span> </el-col>
    </el-row>
      <el-row class="el_row6" >
      <el-col :span="24"><span>【备注】：{{renderObj.remarks}}</span> </el-col>
    </el-row>
  <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
</el-dialog>
 </div>
</template>

<script>
export default {
  name: 'preview',
  props: {
    renderObj: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      dialogVisible: false,
      flag: false,
      render: {}
    }
  },
  methods: {
    openDialog () {
      this.dialogVisible = true
    },
    closeDialog () {
      this.dialogVisible = false
    }
  }

}
</script>

<style scoped lang='less'>
.el_row2{
  padding:20px 0 ;
  border-bottom: 1px solid #333;
}
.el_row3{
  padding:20px 0 ;
}
.el_row4{
  display: flex;
  flex-direction: column;
  padding-bottom: 10px;
  border-bottom: 1px solid #333;
  .el-radio{
    margin: 10px 0;
  }
}
.el_row5{
  padding:10px 0 ;
  border-bottom: 1px solid #333;
}
.el_row6{
  padding:10px 0 ;
  border-bottom: 1px solid #333;
}
.dialog-footer{
  display: flex;
  justify-content: end;
}
.minbox{
  display: flex;
  flex-direction: column;
}
</style>
